<template>
  <div class="InformedConsent">
    <el-button type="primary" @click="PrintData" style="float:right;">打印文件</el-button>
    <h3 @click="showZqty" class="dialog-plate-title" style="margin-top: 15px;cursor:pointer;">
      <span>当日知情同意书</span>
    </h3>

    <!-- <el-collapse v-model="collapse.activeNames" @change="handleChange"> -->
    
    <el-form :inline="true"  label-width="120px" class="demo-ruleForm">
        <el-form-item label="治疗类型" prop="treatmentType">   
            <el-select  v-model="dialogList.dialogSeeAllZqtys.treatmentType" @change="changeZlType">
                      <el-option
                        v-for="item in treatmentTypeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
            </el-select>
        </el-form-item>
        <div class="PrintData" ref="showPrintData" >
            <div id="printData">
                <div style="width:100%;height:40px;line-height:40px;border:0px solid red;font-size:28px;font-family:楷体;text-align:center;">
                    <strong>{{dialogList.dialogSeeAllZqtys.templateTitle}}</strong>
                </div>
                <div v-html="dialogList.dialogSeeAllZqtys.content"></div>
                <div style="width:100%;height:170px;border:0px solid red;">
                    <div class="showSign" style="float:right;width: 340px; height: 160px;border:0px solid black;">
                        <div style="width: 340px;height:60px;border:0px solid blue;">
                        <div style="width:150px;height:60px;line-height:60px;float:left;border:0px solid blue;">
                            接收治疗者签字：
                        </div>
                        <div style="width:180px;height:60px;line-height:60px;float:left;border:0px solid black;">
                            <img style="width:180px;height:60px;float:left;" :src="'data:image/png;base64,'+dialogList.providerSign"/> 
                        </div>
                        </div>
                        <div style="width: 400px;height:30px;">
                        <div style="width:150px;height:30px;line-height:30px;float:left;">
                            患者身份证号：
                        </div>
                        <div style="width:180px;height:30px;line-height:30px;float:left;">
                          <template>
                            <span v-if="zqtyAllContent&&zqtyAllContent.providerIdNo"> {{zqtyAllContent.providerIdNo}}</span>
                            <span v-else> <el-input  v-model="inputObj.providerIdNoText"></el-input></span>
                          </template>
                        </div>
                        </div>
                        <div style="width: 400px;height:30px;">
                        <div style="width:150px;height:30px;line-height:30px;float:left;">
                            医生签字：
                        </div>
                        <div style="width:180px;height:30px;line-height:30px;float:left;" v-if="zqtyAllContent&&zqtyAllContent.receiveDoctorName">
                            {{zqtyAllContent.receiveDoctorName}}
                        </div>
                        </div>
                        <div style="width: 400px;height:30px;">
                        <div style="width:150px;height:30px;line-height:30px;float:left;">
                            日期：
                        </div>
                        <div style="width:180px;height:30px;line-height:30px;float:left;" v-if="zqtyAllContent&&zqtyAllContent.signTime">
                            {{timestampToTime(zqtyAllContent.signTime,"yy-mm-dd")}}
                        </div>
                        </div>

                    </div>
                    <div class="showSign" style="float:right;width: 340px; height: 160px;border:0px solid black;">
                        <div style="width: 340px;height:60px;border:0px solid blue;">
                        <div style="width:150px;height:60px;line-height:60px;float:left;">
                            患者授权亲属签名：
                        </div>
                        <div style="width:180px;height:60px;line-height:60px;float:left;">
                            <img style="width:180px;height:60px;float:left;" :src="'data:image/png;base64,'+dialogList.relativesSign"/> 
                        </div>
                        </div>
                        <div style="width: 340px;height:30px;">
                        <div style="width:150px;height:30px;line-height:30px;float:left;">
                            亲属身份证号：
                        </div>
                        <div style="width:180px;height:30px;line-height:30px;float:left;">
                          <template >
                            <span v-if="zqtyAllContent&&zqtyAllContent.relativesIdNo"> {{zqtyAllContent.relativesIdNo}}</span>
                            <span v-else> <el-input  v-model="inputObj.relativesIdNoText"></el-input></span>
                          </template>
                        </div>
                        </div>
                        <div style="width: 340px;height:30px;">
                        <div style="width:150px;height:30px;line-height:30px;float:left;">
                            与患者关系：
                        </div>
                        <div style="width:180px;height:30px;line-height:30px;float:left;">
                          <template >
                            <span v-if="zqtyAllContent&&zqtyAllContent.relativesRelation">{{zqtyAllContent.relativesRelation}}</span>
                            <span v-else><el-input  v-model="inputObj.relativesRelationText"></el-input></span>
                          </template>
                        </div>
                        </div>
                        <div style="width: 340px;height:30px;border:0px solid black;">
                        <div style="width:150px;height:30px;line-height:30px;float:left;">
                            日期：
                        </div>
                        <div style="width:180px;height:30px;line-height:30px;float:left;;" v-if="zqtyAllContent&&zqtyAllContent.signTime"> 
                            {{timestampToTime(zqtyAllContent.signTime,"yy-mm-dd")}}
                        </div>
                        </div>

                    </div>
                </div>
            </div>
            <div style="border:0px solid red;height:42px;">
                <el-button type="primary" @click="PrintData" style="float:right;margin-left:20px;margin-top:5px;">打印文件</el-button>
                <el-button type="primary"  @click="saveZqtys"   style="float:right;margin-left:20px;margin-top:5px;">提交保存</el-button>
                <el-button type="primary"   @click="startSign(1)"  style="float:right;margin-left:20px;margin-top:5px;">患者签字</el-button>
                <el-button type="primary"   @click="startSign(2)"  style="float:right;margin-top:5px;">家属签字</el-button>
            </div>
        </div>
    </el-form>

    <el-dialog :title="hwSignDialog.title" :visible.sync="hwSignDialog.isShow" width="660px" top="150px" :close-on-clcick-modal="false" class="dialog-form" append-to-body Dialog :before-close="closeSign">
       <object id="HWPenSign" ref="HWPenSign" name="HWPenSign" classid="clsid:E8F5278C-0C72-4561-8F7E-CCBC3E48C2E3" width="620" height="280"></object>
        <div style="border:0px solid red;height:42px;">
          <el-button type="primary"   @click="okSign" style="float:right;margin-left:20px;margin-top:5px;">确定签名</el-button>
          <el-button type="primary"   @click="reSign" style="float:right;margin-left:20px;margin-top:5px;">重新签名</el-button>
          <el-button type="primary"   @click="reInitHwSign" style="float:right;margin-left:20px;margin-top:5px;">重新初始化设备</el-button>
        </div>
    </el-dialog>
    <h3 class="dialog-plate-title" style="margin-top: 15px;">
      <span>历史知情同意书</span>
    </h3>
    <el-table :data="tableHistoryData" stripe border class="company-table" :height="tableHeight" style="width: 97%;">
      <el-table-column prop="treatmentTypeName.name" label="治疗类型" sortable min-width="90">
        <!-- <template slot-scope="scope">{{scope.row.treatmentType==2?"UBIO治疗":(scope.row.treatmentType==3?"PE+UBIO治疗":"TPE治疗")}}</template> -->
      </el-table-column>
      <el-table-column prop="receiveDoctorName" label="接诊医师" sortable min-width="90"></el-table-column>
      <el-table-column prop="signTime" label="接诊日期" sortable min-width="90"><template slot-scope="scope">{{timestampToTime(scope.row.signTime,'yyyy-mm-dd')}}</template></el-table-column>
      <el-table-column fixed="right" label="操作" align="left" min-width="75">
        <template slot-scope="scope"><el-button  type="text" size="small">详情</el-button></template>         
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import informedConsentApi from "plugins/myaxios/interrogation/InformedConsent.js";
import {mapState} from 'vuex'
export default {
  props:{
    hid:{
      type:[String,Number]
    },
    providerId:{
      type:[String,Number]
    }
  },
  computed: {
     ...mapState({clientHeight:state=>state.common.clientHeight,clientWidth:state=>state.common.clientWidth}),
    tableHeight() {
      return this.clientHeight - 184;
    },
    divAutoHeight() {
      return this.clientHeight;
    },
    divAutoWidth() {
      return this.clientWidth - 100;
    },
    autoHeight() {
      return this.clientHeight / 2 - 55;
    },
    autoWidth() {
      return this.clientWidth - 55;
    }
  },
  watch: {
  },
  data() {
    return {
       treatmentTypeList:[],
        dialogList: {
            dialogSeeAllZqtys: {
            title: "知情同意书模板：",
            templateTitle: "",
            content: "",
            data: "",
            treatmentType:"",
            providerSign:"",//患者签字
            relativesSign:"",//患者签字
            }
      },
      tableHistoryData:[],
      obj: null,
      inputObj:{
        relativesIdNoText:null,
        relativesRelationText:null,
        providerIdNoText:null,
      },
      zqtyAllContent: null,
      hwSignDialog:{
        title: "电子签章",
        isShow: false,
        signType: -1,
      },
    };
  },
  mounted() {},
  created() {},
   methods: {
     //初始化变量
     async   init() {
       let self = this;
      // self.$message("初始化渲染知情组件成功！");
      // self.getElementByRefForHWPenSign();
      // self.queryThisData();
      // self.initHanWang();
    await   informedConsentApi.querytreatmentType().then(res=>{
            self.treatmentTypeList=res.content;
      })
      self.queryThisData();
      self.queryHistoryData();
     
     
    },
    //修改治疗类型
    changeZlType( id){
        let self = this;
             self.dialogList.dialogSeeAllZqtys.content = self.appenDataForSeeAllZqtys(
               self.zqtyAllContent,id
            );
    },
    //关闭签名弹窗前的调用
    closeSign(){
      let self = this;
      try{
         window.HWPenSign.HWFinalize();
      }catch(err){
        console.error(err);
      }
      self.hwSignDialog.signType = -1;
      self.hwSignDialog.isShow = false;
    },
    //重新初始化设备
    reInitHwSign(){
      window.HWPenSign.HWInitialize();
    },
    //重新签名
    reSign(){
      window.HWPenSign.HWClearPenSign();//重签
    },
    //确定签名
    okSign(){
      let signStr = window.HWPenSign.HWGetBase64Stream(2);
      let type = self.hwSignDialog.signType;
      if(type == 1){
        self.dialogList.providerSign = signStr;
        self.zqtyAllContent.providerSign = signStr;
      }else if(type == 2){
        self.dialogList.relativesSign = signStr;
        self.zqtyAllContent.relativesSign = signStr;
      }
      self.closeSign();
    },
    //患者、家属签字
    startSign(type){
      let self = this;

      self.hwSignDialog.isShow = true;
      self.hwSignDialog.signType = type;
      setTimeout(function() {  
          self.getElementByRefForHWPenSign();
      }, 100)  
      // self.getElementByRefForHWPenSign();
    },
    //保存知情同意书
    saveZqtys(){
      let self = this;
      self.zqtyAllContent.treatmentType = self.dialogList.dialogSeeAllZqtys.treatmentType;
      self.zqtyAllContent.relativesIdNo = self.inputObj.relativesIdNoText;
      self.zqtyAllContent.relativesRelation = self.inputObj.relativesRelationText;
      self.zqtyAllContent.providerIdNo = self.inputObj.providerIdNoText;
      informedConsentApi.updateZqty(self.zqtyAllContent).then(res=>{
        // self.$message(""+res);
        self.queryThisData();
      });
// /adscm/application/hTreatmentZqty/updateZqty
    },
   
    initHanWang(){
        let self = this;
        try{
          if(window.HWPenSign == null || window.HWPenSign == undefined){
            window.HWPenSign = self.$refs.HWPenSign;
          }
          window.HWPenSign.HWSetBkColor(0xEDEDED);  
          window.HWPenSign.HWSetCtlFrame(2, 0xEDEDED);
          let res = window.HWPenSign.HWGetDevStatus();
          res = window.HWPenSign.HWInitialize();
          window.HWPenSign.HWClearPenSign();//重签
          // alert(res);
        }catch(err){
          alert(err);
        }
        
        // let res = obj.HWInitialize();
    },
    getElementByRefForHWPenSign(){
        let self = this;
        window.HWPenSign = self.$refs.HWPenSign;
        while(window.HWPenSign == undefined || window.HWPenSign == null){
          window.HWPenSign = self.$refs.HWPenSign;
        }
        // alert(window.HWPenSign);
        self.initHanWang();
    },
    //查询列表数据
    queryHistoryData(){
      let self = this;
      informedConsentApi.queryHistory(self.providerId).then(res=>{
          self.tableHistoryData = res.content;
      });
  
    },
    //查询数据
    queryThisData() {
      let self = this;
      informedConsentApi.queryZqtyByHid(self.hid).then(res => {
        if (res != null && res.content != null && res.content != undefined) {
            let tysContent = res.content;
            self.zqtyAllContent = tysContent;
            self.dialogList.dialogSeeAllZqtys.templateTitle = tysContent.zqtyTitle;
            self.dialogList.dialogSeeAllZqtys.treatmentType = tysContent.treatmentType;

            self.dialogList.providerSign = tysContent.providerSign;
            self.dialogList.relativesSign = tysContent.relativesSign;

             let treatmentType_ = tysContent.treatmentType;
             if(treatmentType_==null){
               treatmentType_=1;
             }
            self.dialogList.dialogSeeAllZqtys.content = self.appenDataForSeeAllZqtys(
                res.content,treatmentType_
            );

            
        } else {
          this.$message("失败！");
        }
      });
    },
    //当日的知情同意的显示与隐藏
    showZqty() {
      let self = this;
      $(self.$refs.showPrintData).slideToggle(500);
    },
    //拼接返回值
    appenDataForSeeAllZqtys(data,treatmentType) {
        let  self= this;
       let preFix = data.contentPrefix.replace("{providerName}",data.providerName);
           
          self.treatmentTypeList.forEach(item => {
                  if(item.id===treatmentType){
                      preFix = preFix.replace("{zlType}",item.name);
                  }
                });
            return (
                    "<div>"+
                    preFix +
                    "</div>"
                    // "<div>"+
                    // data.contentDczljjz +
                    // "</div>"+
                    // "<div>"+
                    // data.contentUbiojjz +
                    // "</div>"+
                    // "<div>"+
                    // data.contentSuffix +
                    // "</div>"
                );
       // }
      
    },
  },
};
               
window.Button1_onclick = function () {
 var  res = window.HWPenSign.HWInitialize();
}
window.signComplete = function () {
    window.self.okSign();
}

// function Button2_onclick() {
//    var stream;
//    stream = obj.HWFinalize();
// }


// function Button3_onclick() {
//    obj.HWClearPenSign();
// }

// function Button6_onclick() {
//    obj.HWSetPenColor(0x000000);   
// }

// function Button7_onclick() {
//    obj.HWSetPenColor(0xFF0000);   
// }

// function Button8_onclick() {
//    obj.HWSetPenColor(0x00FF00);   
// }

// function Button9_onclick() {
//    obj.HWSetPenColor(0x0000FF);   
// }

// function Button10_onclick() {
//     penwidth++;
//     if(penwidth >5)
//        penwidth = 5;
//     obj.HWSetPenWidth(penwidth);   
// }

// function Button11_onclick() {
//     penwidth--;
//     if(penwidth < 1)
//        penwidth = 1;
//     obj.HWSetPenWidth(penwidth);   
// }

// function Button12_onclick() {
//    obj.HWSetPenMode(1);
// }

// function Button13_onclick() {
//    obj.HWSetPenMode(0);
// }

// function Button14_onclick() {
//    var stream;
//    stream = obj.HWGetBase64Stream(2);
//    document.getElementById("showBase64").innerHTML = stream;
// }
   
// function Button15_onclick() {
//    obj.HWSetFilePath("E:\\temp\\sign.jpg"); 
//    obj.HWSaveFile();
// }

// function Button16_onclick() {
//    var ret;
//    ret = obj.HWIsConfirm();
// }

// function signComplete() {
//     Button14_onclick();
// }

// function signRestart() {
//      alert("clear");
//      Button3_onclick();         
// }
</script>


<style>
.PrintData {
  width: 98%;
  border: 1px solid gray;
}
</style>